<template>
  <HeaderCom />
  <div>
    <el-card class="box-card" :body-style="{ padding: '30px' }">
      <el-check-tag checked @change="onChange(blog.type_id)">{{ blog.type_name }}</el-check-tag>
      <h2 class="biaoti">{{ blog.blog_title }}</h2>
      <v-md-preview :text="blog.blog_content"></v-md-preview>

    </el-card>
  </div>
  <div>
    
  </div>
</template>
  
<script lang="ts" setup>
import HeaderCom from "../components/HeaderCom.vue"
import { reactive, onMounted } from 'vue'
import { useRoute } from "vue-router"
import { getblog } from '../http/index';
const Route = useRoute(); //获取到值
const blog = reactive({
  blog_title: '',
  blog_content: '',
  type_id: 0,
  type_name: ''
})
// const str = ref("# 使用 SQLSuger 修改数据在前面的文章中，我们介绍了如何使用 [SQLSuger](https://github.com/sugar-lang/sql-sugar) 进行查询。不仅如此，SQLSuger 还支持使用简单和直观的方式修改数据。## 1. 更新数据要更新数据，我们可以使用 `update` 方法。下面是一个示例：")
onMounted(async () => {
  try {
    const BlogReq = {
      blog_id: Route.params.id,
      type_id: 0
    }
    const res = await getblog(BlogReq)
    blog.blog_title = res.data.result[0].blog_title
    blog.blog_content = res.data.result[0].blog_content
    blog.type_id = res.data.result[0].type_id
    blog.type_name = res.data.result[0].type_name
    document.title = blog.blog_title // 动态修改页面标题
  } catch (error) {
    console.error(error)
  }
})

function onChange(id: number) {
  console.log('tyoe_id', id)

}

</script>
  
<style scoped lang="scss">
.box-card {
  margin: 0 auto;
  width: 1000px;
  margin-top: 20px;

  .biaoti {
    text-align: center;
    margin: 50px 0px 30px 0px;
  }
}
</style>